<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-24 16:17:19
 * @LastEditTime: 2021-07-10 15:51:15
 * @Description: 检修数据
-->

<template>
    <div id="hiddenDanger_page">
        <!-- 查询条件 -->
        <div class="selectPart">
            <!-- 选择检修状态 -->
            <div class="topLine">
                <span class="title">检修类型：</span>
                <span class="field" style="width: calc(100% - 45px);" @click="showStatusPop = true">{{checkState}}</span>
            </div>

            <div class="bottomLine" style="position: relative;">
                <span class="title">发现时间：</span>
                <span class="field" @click="showStartTime=true" >{{startTime1 | formatTime}}</span>
                <img :src="iocn.time" @click="showStartTime = true" style="width: 30px;height: 30px;position: absolute;left: 47%;"/>
                <span class="zhi">-</span>
                <span class="field" @click="showEndTime = true" >{{endTime1 | formatTime}}</span>
                <img :src="iocn.time" @click="showEndTime = true" style="width: 30px;height: 30px;position: absolute;right: 0;"/>
            </div>
            <!-- 检修状态下拉弹窗 -->
            <van-popup v-model="showStatusPop" get-container="#app" position="bottom">
                <van-picker show-toolbar title="检修状态" :columns="checkTypeList" @confirm="confirmStatus" @cancel="showStatusPop = false" />
            </van-popup>
            <!-- 发现时间下拉弹窗(开始) -->
            <van-popup v-model="showStartTime" get-container="#app" position="bottom">
                <van-datetime-picker type="datetime" title="选择时间" @confirm="confirmTime('start')" v-model="startTime2" @cancel="showStartTime = false" />
            </van-popup>
            <!-- 发现时间下拉弹窗(结束) -->
            <van-popup v-model="showEndTime" get-container="#app" position="bottom">
                <van-datetime-picker type="datetime" title="选择时间" @confirm="confirmTime('end')" v-model="endTime2" @cancel="showEndTime = false" />
            </van-popup>
        </div>
        <!-- 任务列表 -->
        <div class="listPart">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                  offset="0"
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                    <div class="defectItem">
                        <van-cell-group v-for="(item,i) of CRList" :key="i" :border="false">
                            <van-cell :border="false" title="工作内容：" :value="item.workContent"></van-cell>
                            <van-cell :border="false" title="检修类型:" :value="item.repairType"></van-cell>
                            <van-cell :border="false" title="工作时间：" :value="showDate(item.workDate)"></van-cell>
                        </van-cell-group>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>
<script type="text/javascript">
import Utils from '@/utils/util'
import {getcheckRecord} from '../../api/tourTask';
export default {
    name: "defectList",
    props:{
        deviceinfo:{
            type:Object,
            default: function() {
                return {}
            }
        }
    },
    data() {
        return {
            CRList:[],
            // 隐患状态
            status:"",
            //是否展示隐患状态
            showStatusPop:false,
            checkTypeList: [],//检修类型
            //是否展示开始时间
            showStartTime:false,
            //是否展示结束时间
            showEndTime:false,
            // 开始时间
            startTime1:"",
            startTime2:"",
            // 结束时间
            endTime1:"",
            endTime2:"",
            checkState:"",//检修状态
            checkStateId: "",//检修类型code值
            userInfo: {},
            taskInfo: {},//任务列表
            pageNum: 0,
            pageSize: 10,
            deviceInfo:this.deviceinfo,
            finished:false,
            loading:false,
            refreshing: false,
            iocn: {
                "time": require("@assets/img/mainIndex/time.png"),
            },
        }
    },
    computed: {
        showDate() {
            return function(val) {
                if(val) {
                   return  Utils.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd hh:mm:ss')
                }
                return "";
            }
        }
    },
    methods: {
        /**
         * @description: 确认选择检修类型
         * @param {String} val 
         */ 
        confirmStatus(val){
            this.showStatusPop = false;
            this.checkState = val.name;
            this.checkStateId = val.code;
            this.pageNum = 1;
            this.CRList = [];
            this.getcheckRecord();
        },

        /**
         * @description: 确认选择时间
         * @param {String} type 确认类型
         */ 
        confirmTime(type){
            if(type=="start"){
                console.log(this.startTime2)
                this.showStartTime = false
                this.startTime1 = Utils.DateUtil.getFormatDateByLong(this.startTime2,'yyyy-MM-dd hh:mm:ss')
            }else{
                console.log(this.endTime2)
                this.showEndTime = false
                this.endTime1 = Utils.DateUtil.getFormatDateByLong(this.endTime2,'yyyy-MM-dd hh:mm:ss')
            }
            if(this.startTime1 && this.endTime1) {
                var start = new Date(this.startTime1).getTime()
                var end = new Date(this.endTime1).getTime()
                if(end = start || start < end) {
                    this.pageNum = 1;
                    this.CRList = [];
                    this.getcheckRecord();
                }else{
                    this.$Toast.fail("开始时间不能大于结束时间！")
                }
            }
        },
        
        /**
         * @description: 获取指定设备检修记录
         * @param {*}
         * @return {*}
         */
         getcheckRecord() {
            var self = this,startTime="",finishTime="";
            var params = {
                userId: this.userInfo.userId,//用户id
                roleCode: "",//用户角色
                deviceId: this.deviceInfo.deviceId,//设备类型
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }
            if(this.startTime1 && this.endTime1) {
                startTime = new Date(this.startTime1).getTime();
                finishTime = new Date(this.endTime1).getTime();
                if(startTime > finishTime) {
                    this.$Toast.fail("开始时间不能大于结束时间")
                    return false;
                }else{
                    params.startTime = startTime;
                    params.endTime = finishTime;
                }
            }
            if(this.checkState) {
                params.repairType = this.checkState;//检修类型
            }
            this.$Toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "巡视设备检修记录获取中...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
            getcheckRecord(params).then(data => {
                self.$Toast.clear();
                if(self.refreshing){
                    self.refreshing = false
                }
                self.loading = false;//加载完成
                self.pageNum = data.pageInfo.pageNum;//当前页数
                if(self.pageNum == data.pageInfo.pages || data.pageInfo.pages == 0) {
                    self.finished = true
                }else{
                    self.finished = false
                }
                if(data.success) {
                    self.$Toast.success(data.msg)
                    self.CRList = data.data;//隐患记录
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.finished = true
                self.loading = false;//加载完成
                self.$Toast.clear();
                self.$Toast.fail(err)
            })
        },
        /**
        * @description: 列表下拉刷新
        * @param {*}
        * @return {*}
        */
        onRefresh() {
            //清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.pageNum = 1;
            this.CRList = [];
            this.getcheckRecord();
        },
        /**
        * @description: 上拉加载更多数据
        * @param {*}
        * @return {*}
        */
        onLoad() {
            this.pageNum++;
            this.getcheckRecord();
        },
        arrChange(arr) {
            if(arr.length != 0) {
                arr.forEach(item => {
                    item["text"] = item.name;
                })
                return arr;
            }
            return [];
        },
    },
    filters: {
        formatTime(val) {
            var time = "";
            if(val){
                time = Utils.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd hh:mm') 
            }
            return time;
        }
    },
    created(){
        var userInfo = localStorage.getItem("userInfo");
        this.userInfo = JSON.parse(userInfo);
        this.checkTypeList = this.arrChange(Utils.baseUtil.getSpecialCode("REPAIR_TYPE"));
        //this.getcheckRecord();
    },
    mounted() {
        
    },
}
</script>
<style scoped>
#hiddenDanger_page {
    width: 100%;
    height: 100%;   
    padding-bottom: 0;
    /* padding-top: 46px; */
    background: #fff;
}
.van-nav-bar {
    background: #17b49b;
}
.van-nav-bar /deep/ .van-icon {
    color: #fff;
    font-size: 1.375rem;
}
.scan {
    margin: 0 10px;
}
.van-nav-bar /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 1.125rem;
}
.van-nav-bar /deep/ .van-button {
    margin-right: 10px;
}
/* 筛选区域 */
.selectPart {
    height: 80px;
    padding: 15px;
    background: #fff;
    font-size: 0.75rem;
    color: #666;
    position: fixed;
    top: 10px;
    width: calc(100% - 30px);
}
.selectPart .topLine {
    display: flex;
    margin-bottom: 10px;
}
.selectPart .title {
    display: inline-block;
    width: 65px;
    height: 25px;
    line-height: 25px;
}
.selectPart .field {
    border: 1px solid #eee;
    display: inline-block;
    width: 120px;
    height: 28px;
    line-height: 28px;
    text-align: left;
    width: 40%;
    padding: 0 10px;
    box-sizing: border-box;
}

.selectPart .bottomLine{
    display: flex; 
}
.selectPart .bottomLine .zhi {
    height: 25px;
    line-height: 25px;
    margin: 0 10px;
}
/* 任务列表 */
.listPart {
    height: calc(100% - 150px);
    margin-top: 100px;
    padding: 0 10px 10px;
    overflow-y: auto;
    background: #fff;
}
.defectItem /deep/ .van-cell-group{
    margin-bottom: 10px;
}
.defectItem /deep/ .van-cell{
    background: #fafafa;
    color: #8f8f94;
}

</style>
